<template>
 <a-row style="height: 100%;">
        <a-col :span="14"  >
          <div class="full-calendar-container"
                id="weekCalendar">
              <FullCalendar
                ref="fullCalendar"
                :options="calendarOptions"    
              >


              <!-- 之后使用v-if或者其它方法区别全天事件与非全天事件 -->
              <template #eventContent="info">
                <a-tooltip placement="top" :title="info.event.title">
                  <div class="fc-event-title">{{ info.event.title }}</div>
                </a-tooltip>
                <a-tag color="pink">标签</a-tag>
              </template>
            </FullCalendar>

              
            </div>
            <!-- 这里v-if很重要，不然每个空单元格都可能触发渲染提示信息标题插槽 -->
             <!-- <div  :style="{left: tooltipPosition[0] + 'px', top: tooltipPosition[1] + 'px' }">
              <a-tooltip
                v-model:open="tooltipVisible"
                v-if="tooltipVisible"
                >
                <template #title>
                  <div>
                    <p><strong>Color:</strong> {{ eventInfoTooltip.color }}</p>
                    <p><strong>Title:</strong> {{ eventInfoTooltip.name }}</p>
                    <p><strong>Description:</strong> {{eventInfoTooltip.description }}</p>
                    <p><strong>Start:</strong> {{ eventInfoTooltip.start }}</p>
                    <p><strong>End:</strong> {{ eventInfoTooltip.end }}</p>
                  </div>
                </template>
              </a-tooltip>
             </div> -->

           
        </a-col>
        <a-col :span="10">
          <div class="task-pool-container">
    <a-page-header :ghost="ghost" title="任务池" sub-title="哈哈哈哈" >
        <template #extra>
            <a-button style="background-color: green; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);" @click="addTask">提交更改</a-button>
        </template>
    </a-page-header>
    <hr/>
    <!-- 按钮区 -->
    <div class="task-pool-button">
        <a-space>
            <a-button type="primary" @click="export">导出</a-button>
            <a-button type="primary" @click="editTask">新增临时任务</a-button>
        </a-space>
    </div>
    <hr/>
    <div class="task-tab-button">
    <!-- 标签页按钮区 -->
    <a-space direction="vertical">
        <a-radio-group v-model:value="size">
            <a-radio-button value="large">所有任务</a-radio-button>
            <a-radio-button value="default">日常性任务</a-radio-button>
            <a-radio-button value="small">一次性任务</a-radio-button>
            <a-radio-button value="small">目标性任务</a-radio-button>
            <a-radio-button value="small">复杂型任务</a-radio-button>
            <a-radio-button value="small">其他</a-radio-button>
        </a-radio-group>
    </a-space>
    </div>
    <div>
        <a-row>
            <a-col :span="12" v-for="task in tasks" :key="task.id">
                <TaskCard :task="task" @carddrag="handleDragStart"  draggable="true" :data-task="JSON.stringify(task)" class="pool-task-card"/>
            </a-col>
        </a-row>
    </div>
    <!-- 任务容纳区 -->
          </div>
        </a-col>
    </a-row>
  
</template>

<script setup>
import { ref, onMounted, nextTick,h } from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction'; // 用于日程拖拽和缩放
import { getAllTaskByUserId } from '../../api/task';
import TaskCard from '../TaskCard.vue';
const emit = defineEmits(['calendar-task-dropped']); // 定义任务拖拽事件




// 定义日历配置
const calendarOptions = ref({

  //不要乱设置时区，也就时UTC，不然会出现时间不对的情况
  locale: 'zh-cn',//中文化，比如sun变成周日
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  initialView: 'timeGridWeek', // 设置为周视图

  editable: true,
  eventStartEditable: true,
  eventDurationEditable: true,
  eventResizable: true, // 关键！显式启用调整功能
  eventResizableFromStart: true, // 允许从事件的开始时间进行拖拽


  allDaySlot: true, // 显示全天事件时间槽

  weekNumbers: true, // 显示周数
  weekNumberCalculation: 'iso', // 使用 ISO 标准计算周数
  snapDuration: '0:30', // 设置时间颗粒度为1小时
  weekNumberContent: function(arg) { // 自定义周数内容
    return {
      html: '第' + arg.num + '周' // 返回自定义的HTML内容
    };
  },
  views: {
    dayGridMonth: {
    eventResizable: true // 针对月视图单独启用
    }
  },

  droppable:true,
  // 任务拖拽设置 高危代码区域 官网文档没Vue的参考，只能用DOM操作了
  // 当外部元素被拖放到日历上时触发该回调函数
  drop: function (info) {
    // 打印拖放操作的相关信息到控制台，方便调试
    console.log('drop', info);
  },
  // 当外部元素拖放后成功创建事件时触发该回调函数
  eventReceive: function (info) {
    // console.log('Event received:', info.event);
  },
  // eventMouseLeave: function(info){
  //   eventInfoTooltip.value=null;
  //   // tooltipVisible.value=false;
  //   console.log("mouse leave")
   
    
  // },
  // eventMouseEnter:function(info){
  //   const rect = info.el.getBoundingClientRect();
  //   tooltipPosition.value = [rect.top, rect.left]
  //   console.log(tooltipPosition.value)
  //   console.log("mouse enter")

  //   if(info!=null){
  //     console.log(info.event)
  //     tooltipVisible.value=true;
  //     eventInfoTooltip.value=info.event._def.extendedProps;
  //   }
  // },






  buttonText: {
    today: '今天',
    month: '月视图',
    week: '周视图',
    day: '日视图',
  },
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  slotMinTime: '04:00:00', // 日程表从早上4点开始
  slotDuration: '02:00:00', // 时间段跨度设置为2小时
  slotMaxTime:'24:00:00',
  slotLabelFormat: {
    hour: 'numeric',
    minute: '2-digit',
    omitZeroMinute: true,
    meridiem: 'short'
  },
  

  // 时间段标签内容个性化插槽
  slotLabelContent: function(info) {
        const start = new Date(info.date); // 获取时间段的开始时间
        const end = new Date(start);
        end.setHours(start.getHours() + 2); // 增加2小时得到结束时间
        const startFormatted = start.toLocaleTimeString('zh-cn', { hour: '2-digit', minute: '2-digit' });
        const endFormatted = end.toLocaleTimeString('zh-cn', { hour: '2-digit', minute: '2-digit' });
        return `${startFormatted}-${endFormatted}`;
      },

  events: [
    {
      title: '会议',
      start: '2025-03-10T10:00:00',
      end: '2025-03-12T12:00:00',
      color: '#ff0000',
      allDay: true, // 明确指定全天事件才能在月视图中进行拖拽显示
    },
    {
      title: '项目讨论',
      start: '2025-03-25T14:00:00',
      end: '2025-03-25T16:00:00',
      color: '#00ff00',
    }
  ],
});



const tooltipPosition=ref([0,0])

const tasks=ref([]);

// 挂载后获取日历实例（可选）
// 转换函数
function taskToEvent(task) {
  return {
    id: task.id,
    title: task.name || '做点人事吧',
    start: task.startTime,
    end: task.endTime,
    description: task.description || '那我问你那我问你那我问你',
    color: task.color || '#000',
    extendedProps: {
      ...task
    }
  };
}

const tooltipVisible=ref(false);
const eventInfoTooltip=ref(null)






const fullCalendar = ref(null);
onMounted(() => {
  // const calendarApi = fullCalendar.value.getApi();
// console.log('FullCalendar API:', calendarApi);


  getAllTaskByUserId().then((res) => {
    tasks.value = res.data;
    //保证DOM元素渲染完成后再获取元素
    nextTick(()=>{
    const draggableElements = document.querySelectorAll('.pool-task-card');
    console.log('Draggable elements:', draggableElements);
    // 通过 类名 获取用于显示日历的 DOM 元素
    const calendarElement = document.getElementById('weekCalendar');
    // 创建 Draggable 实例，将指定的元素设置为可拖动
    // 遍历所有可拖动元素，将它们设置为可拖动
    draggableElements.forEach((draggableElement) => {

  
        // 创建 Draggable 实例，将当前元素设置为可拖动
        new Draggable(draggableElement, {
          // 用户开始拖拽外部元素，会被触发
          eventData: () => {

            const taskData = JSON.parse(draggableElement.getAttribute('data-task'));
           
            return taskToEvent(taskData);
          },

          
          //拖拽开始前会进行的回调函数，一般有状态的运用，它才会干点特殊的事情，不然一般就是打印日志
          dragStart: (event) => {
          
            const taskData = draggableElement.getAttribute('data-task');
            console.log("data-task+++++++++++++++++++"+taskData)
          },
        });
      });

    })
  });
  
});
</script>

<!-- 千万不要加scoped 除非你想用默认的界面 -->
<style>
/* 容器样式 */
.full-calendar-container {
  padding: 10px; /* 内边距为 10px */
  width: 100%; /* 容器宽度占满父容器 */
  height: 95%;
  min-width: 800px; /* 最小宽度限制为 800px，适配大屏幕 */
  margin-top: 20px;
  padding-right: 10px;
  margin-right:0px;
  border-radius: 4px; /* 圆角边框，半径为 16px */
  overflow: hidden; /* 隐藏超出容器的内容，确保圆角效果完整 */
  /* 后期使用背景图片可能要考虑一下主体的配色 */
  background-color: rgba(255, 255, 255, 0.829);
  /* background-image: url('../assets/image/calendarBackground.png'); 设置背景图片 */
  font-family: 'Arial', sans-serif; /* 设置字体为 Arial，备用字体为无衬线字体 */
}
.fc{
  height: 100%;
}
.fc-timegrid-axis-frame{
  height: 20px;
}
.fc.th{
  height: 20px;
}

.fc .fc-timegrid-slot-label-cushion {
    height: 100px;
    background: rgba(30, 231, 231, 0.457);
}



/* 事件样式 */
.fc-timegrid-event {
  border-radius: 8px; /* 事件卡片圆角为 8px */
  font-size: 14px; /* 字体大小为 14px */
}

/* 事件标题样式 */
.fc-event-title {
  font-weight: bold; /* 事件标题加粗 */
}
.task-pool-container{
    min-height:500px ;
    min-width: 150px; /* 最大宽度限制为 800px，适配大屏幕 */
    width: 100%; /* 宽度自适应 */
    margin-top: 20px;
    margin-left:10px;
    margin-right: 10px;
    padding-right: 0px;
    border-radius: 4px; /* 圆角边框，半径为 16px */
    overflow: hidden; /* 隐藏超出容器的内容，确保圆角效果完整 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* 添加阴影，提升立体感 */
}
.task-pool-button{
    margin-left: 20px;
    display: flex;
    align-items: left;
}
.task-tab-button{
    margin-top: 5px;
    margin-left:20px ;
    display: flex;
    align-items: left;
}
</style>